<template>
  <div class="box">
    <bs-scroll class="contents">
      <li class="items" v-for="(item, index) in cartLists">
        <radio @click.native="isSelect(index)" :is-select="item.select" />
        <img :src="item.image" alt="" />
        <div class="title">
          <p class="title-style">{{ item.title }}</p>
          <div class="text">{{ item.desc }}</div>
          <p class="price">
            <span class="price-color">￥{{ item.price }}</span>
            <span>x{{ item.count }}</span>
          </p>
        </div>
      </li>
    </bs-scroll>
  </div>
</template>

<script>
// 滚动
// 自定义的单选按钮
import BsScroll from "components/common/bsscroll/BsScroll";
import Radio from "components/content/radio/Radio";

export default {
  data() {
    return {
      checked: false
    }
  },

  components: {
    BsScroll,
    Radio,
  },

  props: {
    cartLists: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  methods: {
    // 商品按钮的点击更改class样式
    isSelect(index) {
      this.cartLists[index].select = !this.cartLists[index].select;
    },
  },
};
</script>

<style scoped>
.box {
  height: 100%;
  padding: 5px;
}

.contents {
  height: calc(100vh - 44px - 49px - 40px - 10px);
  overflow: hidden;
}

.items > img {
  width: 100px;
  height: 130px;
  border-radius: 5px;
  margin: 0 8px;
}

.items {
  display: flex;
  width: calc(100vw - 10px);
  margin-bottom: 10px;
}

.title {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 14px;
}

.title-style {
  width: calc(100vw - 100px - 20px - 15px);
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text {
  width: calc(100vw - 100px - 20px - 15px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: -20px;
  font-size: 12px;
}

.price {
  display: flex;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}

.price-color {
  color: #ff8f96;
}
</style>